<!DOCTYPE html>
<html lang="zh-cn">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="Hugo 0.16" />
    <title>浅尝辄止es6</title>
    
    
    
    <meta name="description" content="description" />
    <meta name="keywords" content='first,article' />
    
        <meta name="author" content="bk201sama" />
    
    
    <link href="" rel="alternate" type="application/rss+xml" title="fuck everyday" />
    <link rel="stylesheet" href="https://bk201sama.github.io/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://bk201sama.github.io/css/highlightjs-themes/androidstudio.css" />
    <link rel="stylesheet" href="https://bk201sama.github.io/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://bk201sama.github.io/css/phlat.css" />
    
        
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({
                    google_ad_client: "ca-pub-XXXXXX",
                    enable_page_level_ads: true
                });
            </script>
        
    
</head>

    <body>
        <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">fuck everyday</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                
                    <li>
                        <a href="/">
                            Home
                        </a>
                    </li>
                
                    <li>
                        <a href="/about/">
                            About
                        </a>
                    </li>
                
            </ul>
        </div>
    </div>
</nav>

        <div id="top" class="container">
            <div class="row" id="content-main">
                <div class="col-md-8">
                    <div class="row">
    <div class="col-md-12 content-card">
        <h1>浅尝辄止es6</h1>
        
            
            <ul class="list-inline meta">
                <li><i class="fa fa-calendar"></i>March 15, 2016</li>
                <li><i class="fa fa-user"></i>bk201sama</li>
                
                    
                    <li><i class="fa fa-folder"></i><a href="https://bk201sama.github.io/categories/javascript">javascript</a></li>
                
            </ul>
        
        
    <ul class="list-inline share" style="margin-top: 15px; margin-left: 0px">
        <li class="facebook-share"><a target="_blank" href="http://www.facebook.com/sharer.php?u=https%3a%2f%2fbk201sama.github.io%2f2016%2f03%2f%25E6%25B5%2585%25E5%25B0%259D%25E8%25BE%2584%25E6%25AD%25A2es6%2f"><i class="fa fa-facebook fa-lg"></i>Facebook</a></li>
        <li class="googleplus-share"><a target="_blank" href="https://plus.google.com/share?url=https%3a%2f%2fbk201sama.github.io%2f2016%2f03%2f%25E6%25B5%2585%25E5%25B0%259D%25E8%25BE%2584%25E6%25AD%25A2es6%2f"><i class="fa fa-google-plus fa-lg"></i>Google+</a></li>
        <li class="twitter-share"><a target="_blank" href="https://twitter.com/share?url=https%3a%2f%2fbk201sama.github.io%2f2016%2f03%2f%25E6%25B5%2585%25E5%25B0%259D%25E8%25BE%2584%25E6%25AD%25A2es6%2f&amp;text=%e6%b5%85%e5%b0%9d%e8%be%84%e6%ad%a2es6"><i class="fa fa-twitter fa-lg"></i>Twitter</a></li>
        <li class="reddit-share"><a target="_blank" href="http://reddit.com/submit?url=https%3a%2f%2fbk201sama.github.io%2f2016%2f03%2f%25E6%25B5%2585%25E5%25B0%259D%25E8%25BE%2584%25E6%25AD%25A2es6%2f&amp;title=%e6%b5%85%e5%b0%9d%e8%be%84%e6%ad%a2es6"><i class="fa fa-reddit fa-lg"></i>Reddit</a></li>
        <li class="linkedin-share"><a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=https%3a%2f%2fbk201sama.github.io%2f2016%2f03%2f%25E6%25B5%2585%25E5%25B0%259D%25E8%25BE%2584%25E6%25AD%25A2es6%2f"><i class="fa fa-linkedin fa-lg"></i>LinkedIn</a></li>
        <li class="stumbleupon-share"><a target="_blank" href="http://www.stumbleupon.com/submit?url=https%3a%2f%2fbk201sama.github.io%2f2016%2f03%2f%25E6%25B5%2585%25E5%25B0%259D%25E8%25BE%2584%25E6%25AD%25A2es6%2f&amp;title=%e6%b5%85%e5%b0%9d%e8%be%84%e6%ad%a2es6"><i class="fa fa-stumbleupon fa-lg"></i>StumbleUpon</a></li>
    </ul>


        <p>抽了空把es6看了下,本文只是笔记.</p>

<p>###兼容性
首先关心的肯定是兼容性，因为有一个工具<a href="https://babeljs.io/">Babel</a>,可以转码，甚至可以在线转码。</p>

<p>###新增了关键字
比如类似函数作用域var的代码块作用域let，类似java中final的const。</p>

<p>###新增了一些方法</p>

<p>####Object的freeze()方法</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">英文解释</a></p>

<pre><code class="language-javascript">const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;
</code></pre>

<p>INFO:<a href="http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html">严格模式</a><code>&quot;use strict&quot;;</code></p>

<p>####Array.from()
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-likeobject）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。</p>

<pre><code class="language-javascript">let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

//还可以接受第二个参数，作用类似于数组的map方法，
//用来对每个元素进行处理，将处理后的值放入返回的数组。
// =&gt; 为箭头函数， x =&gt; x x 等价于 function(x){ return xx; }
Array.from(arrayLike, x =&gt; x * x);
// 等同于
Array.from(arrayLike).map(x =&gt; x * x);

Array.from([1, 2, 3], (x) =&gt; x * x)
// [1, 4, 9]
</code></pre>

<p>####Array.of()
Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。</p>

<pre><code class="language-javascript">Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
//Array方法没有参数、一个参数、三个参数时，返回结果都不一样。只有当参数个数不少于2个时，Array()才会返回由参数组成的新数组。参数个数只有一个时，实际上是指定数组的长度。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
</code></pre>

<p>####Object.is()
ES5比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。</p>

<p>Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。</p>

<pre><code class="language-javascript">+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
</code></pre>

<p>###作用域
ES6之前var变量的作用域是函数内，当var变量在函数外就会造成污染（括号不影响作用域），于是出现了立即执行匿名函数（IIFE）。而ES6允许块级作用域的任意嵌套,外层作用域无法读取内层作用域的变量。内层作用域可以定义外层作用域的同名变量。实际上使得获得广泛应用的立即执行匿名函数（IIFE）不再必要了。</p>

<pre><code class="language-javascript">// IIFE写法
(function () {
  var tmp = ...;
  ...
}());
//也可以强制JavaScript识别代码（一般很少这么用
!function () {
  // ...
}();

+function () {
  // ...
}();

-function () {
  // ...
}();

~function () {
  // ...
}();
//传变量
(function (window) {
  // 这里可以调用到window
})(window);

(function (window, document) {
  // 这里可以调用到window和document
})(window, document);
//ES6
{{{{{let insane = 'Hello World'}}}}};
//另外，ES6也规定，函数本身的作用域，在其所在的块级作用域之内 。如下:
function f() { console.log('I am outside!'); }
(function () {
  if(false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
//上面代码在ES5中运行，会得到“I am inside!”，但是在ES6中运行，会得到“I am outside!”。
//这是因为ES5存在函数提升，不管会不会进入 if代码块，函数声明都会提升到当前作用域的顶部，
//得到执行；而ES6支持块级作用域，不管会不会进入if代码块，其内部声明的函数皆不会影响到作用域的外部。
</code></pre>

<p>###解构
比如ES6以前：</p>

<pre><code class="language-javascript">var a = 1;
var b = 2;
var c = 3;
//ES6
var [a, b, c] = [1, 2, 3];
//对象的解构赋值的内部机制，是先找到同名属性，
//然后再赋给对应的变量。真正被赋值的是后者，
//而不是前者。
var { bar, foo } = { foo: &quot;aaa&quot;, bar: &quot;bbb&quot; };
//如果对象变量名与属性名不一致，必须写成下面这样。
var { foo: baz } = { foo: &quot;aaa&quot;, bar: &quot;bbb&quot; };
baz // &quot;aaa&quot;
</code></pre>

<p>本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。解构赋值允许指定默认值。比如<code>[x, y = 'b'] = ['a'] // x='a', y='b'</code></p>

<p>如果要将一个已经声明的变量用于解构赋值，必须非常小心。如下:</p>

<pre><code class="language-javascript">// 错误的写法
var x;
//大括号写在行首导致了JavaScript引擎会将{x}理
//解成一个代码块，从而发生语法错误。
{x} = {x: 1};
// SyntaxError: syntax error
// 正确的写法
({x} = {x: 1});
</code></pre>

<p>字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。</p>

<pre><code class="language-javascript">const [a, b, c, d, e] = 'hello';
a // &quot;h&quot;
b // &quot;e&quot;
c // &quot;l&quot;
d // &quot;l&quot;
e // &quot;o&quot;
//类似数组的对象都有一个length属性，因此还可以对
//这个属性解构赋值。
let {length : len} = 'hello';
len // 5
</code></pre>

<p>解构赋值时，如果等号右边是数值和布尔值，则会先转为<a href="http://blog.sina.com.cn/s/blog_70a3539f0101eww3.html">对象</a>。解构赋值的规则是，只要等号右边的值不是对象，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。</p>

<pre><code class="language-javascript">let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true
</code></pre>

<p>函数的参数也可以使用解构赋值</p>

<pre><code class="language-javascript">function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
</code></pre>

<p>###for of循环
任何部署了Iterator接口的对象，都可以用for&hellip;of循环遍历.</p>

<pre><code class="language-javascript">//ES5之前
for (var index = 0; index &lt; myArray.length; index++) {
    console.log(myArray[index]);
}
//ES6之前，你不能用break语句跳出循环语句。return类似continue
myArray.forEach(function (value) {   
    console.log(value);  
 });  
//ES6
var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + &quot; is &quot; + value);
}
// first is hello
// second is world
// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}

</code></pre>

<p>INFO:<a href="http://blog.csdn.net/oscar999/article/details/8671546">forEach</a></p>

<p>###模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。</p>

<pre><code class="language-javascript">//传统的JavaScript语言，输出模板通常是这样写的。
$(&quot;#result&quot;).append(
  &quot;There are &lt;b&gt;&quot; + basket.count + &quot;&lt;/b&gt; &quot; +
  &quot;items in your basket, &quot; +
  &quot;&lt;em&gt;&quot; + basket.onSale +
  &quot;&lt;/em&gt; are on sale!&quot;
);
//ES6
$(&quot;#result&quot;).append(`
  There are &lt;b&gt;${basket.count}&lt;/b&gt; items
   in your basket, &lt;em&gt;${basket.onSale}&lt;/em&gt;
  are on sale!
`);
</code></pre>

<p>###数组推导
数组推导（array comprehension）提供简洁写法，允许直接通过现有数组生成新数组。这项功能本来是要放入ES6的，但是TC39委员会想继续完善这项功能，让其支持所有数据结构（内部调用iterator对象），不像现在只支持数组，所以就把它推迟到了ES7。Babel转码器已经支持这个功能。</p>

<pre><code class="language-javascript">var a1 = [1, 2, 3, 4];
var a2 = [for (i of a1) i * 2];

a2 // [2, 4, 6, 8]
</code></pre>

<p>###rest参数
ES6引入rest参数（形式为“&hellip;变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。(怎么那么像java)</p>

<pre><code class="language-javascript">function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10
</code></pre>

<p>###扩展运算符
扩展运算符（spread）是三个点。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。</p>

<pre><code class="language-javascript">console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [&lt;div&gt;, &lt;div&gt;, &lt;div&gt;]
</code></pre>

<p>###箭头函数
ES6允许使用“箭头”（=&gt;）定义函数。</p>

<pre><code class="language-javascript">var f = v =&gt; v;
//等同于
var f = function(v) {
  return v;
};
</code></pre>

<p>如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。</p>

<pre><code class="language-javascript">var f = () =&gt; 5;
// 等同于
var f = function (){ return 5 };

var sum = (num1, num2) =&gt; num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};
</code></pre>

<p>如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。</p>

<pre><code class="language-javascript">var sum = (num1, num2) =&gt; { return num1 + num2; }
</code></pre>

<p>由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。</p>

<pre><code class="language-javascript">var getTempItem = id =&gt; ({ id: id, name: &quot;Temp&quot; });
</code></pre>

<p>###Symbol
ES5的对象属性名 都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin模式），新方法的名字就有可能与现有方法产生冲突。</p>

<p>如果有一种机制，保证每个属性的名字都是独一无二的 就好了，这样就从根本上防止属性名的冲突。这就是ES6引入Symbol的原因。</p>

<p>ES6引入了一种新的 原始数据类型(非对象,是值) Symbol，表示独一无二的值。</p>

<p>凡是属性名属于Symbol类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。</p>

<pre><code>let s1 = Symbol();

typeof s1
// &quot;symbol&quot;

let s2= Symbol();

s1 === s2 // false
</code></pre>

<p>###Promise 对象</p>

<pre><code>var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/*异步操作成功*/){
    resolve(value);
  } else {
    reject(error);
  }
});
</code></pre>

<p>Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。</p>

<p>resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。</p>

<pre><code>Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。

promise.then(function(value) {
  // success
}, function(value) {
  // failure
});
</code></pre>

<blockquote>
<p>（本文待润色添加）</p>
</blockquote>

<p>例行一张图，这动画最近看起来挺带感的，尤其BGM棒。
<img src="http://ww3.sinaimg.cn/thumb150/6ade82bajw1ezwoufsbp0j203d04hq34.jpg" alt="新浪图挂了" /></p>

<p>以上多大抄袭以下链接，如有雷同，纯属正常，不服你打我呀：
<a href="http://es6.ruanyifeng.com/#docs/intro">阮一峰</a><br />
<a href="http://simplyy.space/blog/article/es6%E7%AE%80%E7%89%88%E5%85%A5%E9%97%A8%EF%BC%881%EF%BC%89">SimplyYu</a></p>

        
    <ul class="list-inline tags" style="margin-top: 15px; margin-left: 0px">
        
            <li style=""><a href="https://bk201sama.github.io/tags/first">first</a></li>
        
            <li style=""><a href="https://bk201sama.github.io/tags/article">article</a></li>
        
    </ul>


    </div>
</div>

                    
    
        <div class="row">
            <div class="col-md-12 content-card">
                <div id="disqus_thread"></div>
                <script>
                    (function() {
                        if (window.location.hostname == "localhost") {
                            document.write("Disqus comments are unavailable while serving on localhost or 127.0.0.1");
                            return;
                        }
                        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                        var disqus_shortname = 'shortname';
                        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                    })();
                </script>
                <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
            </div>
        </div>
    


                </div>
                <div class="col-md-4">
                    <div class="row">
    <div class="col-md-11 col-md-offset-1 card">
        <h5>Search</h5>
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form">
            <div class="input-group">
                <input class="form-control" type="search" name="q" />
                <span class="input-group-btn">
                    <button class="btn btn-custom" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                </span>
            </div>
            <input type="hidden" name="q" value="site:https://bk201sama.github.io/">
        </form>
    </div>
</div>

                    <div class="row">
    <div class="col-md-11 col-md-offset-1 card">
        <h5>Recent Posts</h5>
        <ul class="list-unstyled posts-recent">
            
                <li><a href="https://bk201sama.github.io/2016/03/2016%E5%B9%B4%E9%A1%B9%E7%9B%AE%E6%80%BB%E7%BB%93/">2016年项目总结</a></li>
            
                <li><a href="https://bk201sama.github.io/2016/03/java%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%95%B4%E7%90%86/">java基础知识整理</a></li>
            
                <li><a href="https://bk201sama.github.io/2016/03/openwrt%E5%88%9D%E4%BD%93%E9%AA%8C/">openwrt初体验</a></li>
            
                <li><a href="https://bk201sama.github.io/2016/03/%E4%B8%A2%E6%89%8B%E6%9C%BA%E6%84%9F%E6%83%B3/">丢手机感想</a></li>
            
                <li><a href="https://bk201sama.github.io/2016/03/%E4%BD%93%E9%AA%8Candriod/">体验andriod</a></li>
            
        </ul>
    </div>
</div>

                    
    
        <div class="row">
            <div class="col-md-11 col-md-offset-1 card">
                <ins class="adsbygoogle"
                    style="display:block"
                    data-ad-client="ca-pub-XXXXXX"
                    data-ad-slot="9997956765"
                    data-ad-format="auto">
                </ins>
            </div>
        </div>
    


                    
    
        <div class="row">
            <div class="col-md-11 col-md-offset-1 card">
                <h5>categories</h5>
                <ul class="list-unstyled posts-recent">
                    
                        <li><a href="https://bk201sama.github.io/categories/hardware">hardware</a></li>
                    
                        <li><a href="https://bk201sama.github.io/categories/java">java</a></li>
                    
                        <li><a href="https://bk201sama.github.io/categories/life">life</a></li>
                    
                        <li><a href="https://bk201sama.github.io/categories/javascript">javascript</a></li>
                    
                </ul>
            </div>
        </div>
    

    


                    <div class="row">
    <div class="col-md-11 col-md-offset-1 card">
        <h5>Support This Site</h5>
        <p>
            If my blog was helpful to you, then please consider visiting my
            <a href="http://amzn.com/w/1YU2424SGEF1B">Amazon Wishlist</a> or donating via <a href="https://paypal.me/nraboy">Paypal</a>
            or <a href="https://cash.me/$nraboy">Square Cash</a>
        </p>
    </div>
</div>

                </div>
            </div>
        </div>
        <footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-xs-6">
    <ul class="list-inline links">
        
            <li>
                <a href="/privacy-policy/">
                    Privacy Policy
                </a>
            </li>
        
    </ul>
</div>

            <div class="col-md-4 col-xs-6">
    <ul class="list-inline social-media">
        
        
        
        
        
        
        
        
        
        
        
    </ul>
</div>

        </div>
        <div class="row">
            <div class="col-md-12">
                <p>
                    <a href="https://github.com/nraboy/hugo-phlat-theme">Phlat Theme</a> designed and built by <a href="http://www.nraboy.com">Nic Raboy</a> in San Francisco, California.
                </p>
            </div>
        </div>
    </div>
</footer>

        <div id="back-to-top" class="hidden">
    <a href="#top" class="well well-sm" onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
        <i class="glyphicon glyphicon-chevron-up"></i> Back to Top
    </a>
</div>
<script src="https://bk201sama.github.io/js/jquery-2.2.1.min.js"></script>
<script src="https://bk201sama.github.io/js/bootstrap.min.js"></script>
<script src="https://bk201sama.github.io/js/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
    if(($(window).height() + 100) < $(document).height()) {
        $('#back-to-top').removeClass('hidden').affix({
            offset: {
                top: 100
            }
        });
    }
</script>

    
        <script>
            
            [].forEach.call(document.querySelectorAll('.adsbygoogle'), function() {
                (adsbygoogle = window.adsbygoogle || []).push({});
            });
        </script>
    


    
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-XXXXX-YY', 'auto');
        ga('send', 'pageview');
    </script>




    </body>
</html>
